<script setup>
import { defineProps, computed } from 'vue'

const props = defineProps({
  status: {
    type: [Number, String],
    required: true
  },
  type: {
    type: String,
    default: 'default'
  },
  options: {
    type: Array,
    default: () => []
  }
})

// 预定义的状态映射
const statusMaps = {
  // 订单状态
  order: {
    0: { type: 'info', label: '待支付' },
    1: { type: 'warning', label: '已支付' },
    2: { type: 'primary', label: '已发货' },
    3: { type: 'success', label: '已完成' }
  },
  // 库存状态
  stock: {
    low: { type: 'danger', label: '无库存' },
    warning: { type: 'warning', label: '库存不足' },
    normal: { type: 'success', label: '库存充足' }
  },
  // 默认状态
  default: {
    0: { type: 'info', label: '未知' },
    1: { type: 'success', label: '正常' }
  }
}

const statusInfo = computed(() => {
  // 如果提供了自定义选项，则优先使用
  if (props.options.length > 0) {
    const option = props.options.find(opt => opt.value === props.status)
    if (option) {
      return { type: option.type || 'info', label: option.label }
    }
  }
  
  // 否则使用预定义的状态映射
  const typeMap = statusMaps[props.type] || statusMaps.default
  return typeMap[props.status] || { type: 'info', label: '未知状态' }
})
</script>

<template>
  <el-tag :type="statusInfo.type" effect="light">{{ statusInfo.label }}</el-tag>
</template>

<style scoped>
/* 可以添加自定义样式 */
</style> 